<script setup>
import { ref, watch } from 'vue'

// 接收父组件传入的数据
const props = defineProps({
  items: {
    type: Array,
    default: () => []
  }
})

// 控制弹窗显示/隐藏
const visible = ref(false)

// 打开弹窗
const open = () => {
  visible.value = true
}

// 关闭弹窗
const handleClose = () => {
  visible.value = false
}

// 暴露方法给父组件调用
defineExpose({
  open,
  close: handleClose
})
</script>

<template>
  <el-dialog title="查看商品明细" v-model="visible" width="80%" :before-close="handleClose">
    <el-table :data="items" style="width: 100%">
      <el-table-column type="index" label="#" width="50" />
      <el-table-column prop="code" label="商品编码" />
      <el-table-column prop="name" label="商品名称" />
      <el-table-column prop="description" label="商品描述" />
      <el-table-column prop="specCode" label="规格编码" />
      <el-table-column prop="specName" label="规格名称" />
      <el-table-column prop="unit" label="商品单位" />
      <el-table-column prop="totalQuantity" label="总数量" />
    </el-table>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>



<style scoped>
.dialog-footer {
  text-align: right;
}
</style>